require(['./config'], () => {
    require(['template','header', 'footer', 'jquery'], (template,head) => {
        class Shopping {
            constructor() {
                this.renderShopList()
                
            }
            renderShopList(){
                const info = JSON.parse(localStorage.getItem("info"))
                $(".zl-table").html(template('shopCar',{info}))
                this.seleALL()
                this.shopCountChange()
                this.shop_del()
                this.allProds_Price()
            }
            //最上面的全选按钮
            seleALL(){
                $("#content").on('click','.checkAll',function(){
                    $(".checkSingle").prop('checked',$(this).prop("checked"))
                })
                //下面复选框变化，全选框跟着变化
                $("#content").on('click','.checkSingle',function(){
                    const checks = Array.from(document.getElementsByClassName("checkSingle"))
                    const res = checks.every((item) => {
                        return $(item).prop("checked")
                    })
                    // console.log(res);
                    
                    if(res){
                        $('.checkAll').prop("checked",true)
                    }else{
                        $('.checkAll').prop("checked",false)
                    }
                })
            }
            //商品数量变化
            shopCountChange(){
                $(".shopReduce").on('click',(e) => {
                    let num1 = $(e.target.nextElementSibling).val() - 0

                    num1--

                    if(num1 <= 1){
                        num1 = 1
                    }

                    $(e.target.nextElementSibling).val(num1)

                    let reduce=$(".shopReduce")

                    let index1=Array.from(reduce).indexOf(e.target)

                    let info=JSON.parse(localStorage.getItem("info"))

                   info[index1].count=num1
                   info=JSON.stringify(info)

                   localStorage.setItem("info",info)

                   head.shopNum()
                   this.renderShopList()
                })
                $(".shopAdd").on('click',(e) =>{
                    let num1 = $(e.target.previousElementSibling).val() - 0
                    num1++
                   
                    $(e.target.previousElementSibling).val(num1)

                    let add=$(".shopAdd")
                    let index=Array.from(add).indexOf(e.target)

                   let info=JSON.parse(localStorage.getItem("info"))
                   info[index].count=num1
                   info=JSON.stringify(info)
                   localStorage.setItem("info",info)

                   head.shopNum()
                   this.renderShopList()

                })
            }

            //商品删除
            shop_del(){
                $(".delete").on('click',( e ) => {
                    let del_index=Array.from($(".delete")).indexOf(e.target)
                    let info=JSON.parse(localStorage.getItem("info"))
                    
                    info.splice(del_index,1)
                    info=JSON.stringify(info)
                    localStorage.setItem("info",info)
                    
                    head.shopNum()
                    this.renderShopList()
                    
                })
            }

            //所有商品的总价格
            allProds_Price(){

                let arr = Array.from($(".priceAll"))
                // console.log(typeof arr[0]);
                
                
                const checks_ = Array.from(document.getElementsByClassName("checkSingle"))

                let money = 0
                $(".checkSingle").on('click',function(){
                    let money = 0
                    checks_.forEach(function(item,index){
                        if($(item).prop("checked")){
                            let sele = 0
                            
                            sele = arr[index].innerText - 0
                            
                            money = sele + money
                            $("#allProdsPrice").text(money)
                        }
                    })
                })
            }
           
        }
        return new Shopping()
    })
})




